<template>
  <div class="profile-container">
    <!-- 引用导航栏组件 -->
    <NavBar @view-history-questionnaire="viewHistoryQuestionnaire" />
    
    <h2>个人资料</h2>
   <div class="content-wrapper">
    <!-- 左侧侧边栏 -->
    <div class="sidebar">
      <ul>
        <li :class="{'active': currentTab === 'profile'}" @click="currentTab = 'profile'">个人信息</li>
        <li v-if="role === 'CONSULTANT'" :class="{'active': currentTab === 'avatar'}" @click="currentTab = 'avatar'">个人头像</li>
      </ul>
    </div>

    <!-- 个人资料表单 -->
    <div class="profile-form">
      <div v-if="currentTab === 'profile'">
        <!-- 显示个人资料 -->
        <div class="profile-info">

          <!-- 用户名、昵称等表格 -->
          <div class="info-section">
            <div class="form-group">
              <label>用户名</label>
              <input type="text" class="form-control" v-model="user.username" disabled />
            </div>

            <div class="form-group">
              <label>昵称</label>
              <input type="text" class="form-control" v-model="user.nickname"  />
            </div>

            <div class="form-group">
              <label>地区</label>
              <input type="text" class="form-control" v-model="user.region"  />
            </div>

            <div class="form-group">
              <label>邮箱</label>
              <input type="email" class="form-control" v-model="user.email"  />
            </div>
          </div>
        </div>

        <!-- 咨询师独有字段 -->
        <div v-if="role === 'CONSULTANT'" class="consultant-info">
          <div class="form-group">
            <label>个人简介</label>
            <textarea class="form-control" v-model="user.individual" rows="3"></textarea>
          </div>

          <div class="form-group">
            <label>专长领域</label>
            <input type="text" class="form-control" v-model="user.goodAt" />
          </div>

          <div class="form-group">
            <label>时薪</label>
            <input type="text" class="form-control" v-model="user.wage" />
          </div>

          <div class="form-group">
            <label>支付宝账户</label>
            <input type="text" class="form-control" v-model="user.aliPayCode" />
          </div>

          <div class="form-group">
            <label>腾讯会议号</label>
            <input type="text" class="form-control" v-model="user.tencentMeetingCode" />
          </div>
        </div>

        <button @click="submitProfile" class="btn btn-primary">保存</button>
      </div>

      <div v-if="currentTab === 'avatar'">
        <!-- 头像上传 -->
        <div class="form-group">
          <label>头像</label>
          <input type="file" class="form-control" @change="handleImageChange" />
          <img :src="user.avatar" alt="头像" class="avatar-preview" />
          <button @click="submitAvatar" class="btn btn-primary">上传头像</button>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import NavBar from './NavBar.vue';
export default {
  components: {
    NavBar
  },
  data() {
    return {
      user: {
        username: '',
        nickname: '',
        region: '',
        email: '',
        avatar: '',         // 用户头像
        individual: '',     // 个人简介
        goodAt: '',         // 专长领域
        wage: '',           // 时薪
        aliPayCode: '',     // 支付宝账户
        tencentMeetingCode: '', // 腾讯会议号
      },
      role: localStorage.getItem("role"),  // 获取用户角色
      isVisitor: localStorage.getItem("role") === 'VISITOR',  // 判断是否为来访者
      currentTab: 'profile',  // 控制左侧菜单的tab
      avatarFile: null,  // 存储上传的头像文件
    };
  },
  created() {
    this.loadUserInfo();  // 获取用户资料
  },
  methods: {
    // 获取用户资料
    async loadUserInfo() {
      try {
        const token = localStorage.getItem("token");
        const response = await this.$axios.get('/user/info', {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json; charset=utf-8'
          }
        });
        this.user = response.data;
      } catch (error) {
        console.error("获取用户资料失败:", error);
      }
    },

    // 选择头像文件
    handleImageChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.avatarFile = file;  // 存储文件
        this.user.avatar = URL.createObjectURL(file);  // 显示预览图像
      }
    },

    // 提交头像上传至后端
    async submitAvatar() {
      if (!this.avatarFile) {
        alert("请选择头像文件！");
        return;
      }

      const formData = new FormData();
      formData.append('file', this.avatarFile);  // 将头像文件附加到formData

      const token = localStorage.getItem("token");

      try {
        const response = await this.$axios.post('/user/image/upload', formData, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'multipart/form-data' // 设置为 multipart/form-data
          }
        });

        if (response.status === 200) {
          alert("头像上传成功");
        }
      } catch (error) {
        console.error("上传头像失败:", error);
      }
    },

    // 提交修改的用户资料
    async submitProfile() {
      const token = localStorage.getItem("token");
      const updateData = {
        region: this.user.region,
        email: this.user.email,
        nickname: this.user.nickname,
        individual: this.user.individual,
        goodAt: this.user.goodAt,
        wage: this.user.wage,
        aliPayCode: this.user.aliPayCode,
        tencentMeetingCode: this.user.tencentMeetingCode,
      };

      try {
        const response = await this.$axios.post('/user/infoUpdate', updateData, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json; charset=utf-8'
          }
        });

        if (response.status === 200) {
          alert("资料修改成功");
        }
      } catch (error) {
        console.error("更新用户资料失败:", error);
      }
    }
  }
};
</script>

<style scoped>
.profile-container {
    font-size: 1rem;
    background: linear-gradient(135deg, #87CEFA, #ffb6c1); /* 渐变背景色 */
    justify-content: center;
  align-items: center;
  padding: 10px;
  /* height: 100%; */
  min-height: 100vh;
}
.profile-container h2{
  text-align: center;
}
.content-wrapper {
  display: flex;
  gap: 30px;
  max-width: 1300px;
  margin: 50px auto;
  align-items: flex-start;
}

.profile-form {
  flex: 1;
  max-width: 450px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.profile-info {
  display: flex; /* 使用 flexbox 布局 */
  align-items: flex-start; /* 顶部对齐 */
  gap: 20px; /* 设置间距 */
}
.info-section {
  flex: 1; /* 占据剩余空间 */
}



.sidebar {
  width: 200px;
   flex-shrink: 0;
  position: sticky;
  top: 20px;
  background-color: #f4f7fc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sidebar ul li.active {
  background-color: #4e73df;
  color: white;
  font-weight: bold;
}

.sidebar ul li:hover {
  background-color: #e3f2fd;
}

.sidebar ul li i {
  font-size: 1.3rem;
}

.sidebar ul li.active i {
  color: white;
}

.sidebar ul li:hover i {
  color: #4e73df;
}

.sidebar .sidebar-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4e73df;
  margin-bottom: 20px;
}


.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: bold;
}

.form-control {
  width: 85%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 10px;
}

button {
  background-color: #4e73df;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 90%;
}

button:hover {
  background-color: #2e59d9;
}
</style>
